<template>
	<view class="content">
		<u-navbar title="好友列表" :placeholder="true" bgColor="rgba(0,0,0,0.0)" :autoBack="true">
		</u-navbar>
		<u-toast ref="uToast" />
		<common :tips='commonTips'></common>
		<view class="address-list" v-if="indexList.length > 0">
			<u-index-list :index-list="indexList">
				<view v-for="(item,index) in indexList" :key="index">
					<u-index-item>
						<u-index-anchor bgColor="rgba(87, 85, 242,0.1)" :text="item"></u-index-anchor>
						<view class="address-item" v-for="(friend,friendIdx) in friends[item]"
							@click="goToSessionInfo(friend.friend_id)" :key="friendIdx">
							<image class="address-avatar" v-if="friend.avatar" :src="friend.avatar" mode="widthFix">
							</image>
							<view class="address-info">{{friend.nickname}}</view>
						</view>
					</u-index-item>
				</view>
			</u-index-list>
		</view>
		<view v-else>
			<u-empty mode="list" :marginTop="100" icon="http://cdn.uviewui.com/uview/empty/list.png">
			</u-empty>
		</view>
	</view>
</template>

<script>
	import common from "@/components/common/common.vue"
	export default {
		components: {
			common
		},
		data() {
			return {
				keywords: '',
				indexList: [],
				friends: [],
				commonTips: ''
			}
		},
		onLoad() {
			this.ws.pageFun(this.pageDataLoad, this);
		},
		onShow: function() {
			this.ws.checkNetwork(this)
			if (this.ws.pageRefresh.addressList) {
				// 被其他页面通知刷新此页
				this.ws.pageFun(this.pageDataLoad, this);
				this.ws.pageRefresh.addressList = false
				return;
			}
		},
		methods: {
			goToSessionInfo(id) {
				this.$navTo.togo('/pages/message/info/index', {
					id: id
				})
			},
			pageDataLoad: function(refresh = false) {
				this.ws.send({
					c: 'User',
					a: 'loadContact',
					data: {
						'method': 'all-friend',
						'refresh': refresh
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		min-height: 100vh;
		background-image: url('https://m.lqvvvv.com/assets/static/index/nav-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 800rpx;
		padding: 30rpx;
	}

	.address-item {
		height: 120rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	}

	.address-avatar {
		height: 80rpx;
		width: 80rpx;
		border-radius: 16rpx;
	}

	.address-info {
		flex: 1;
		height: 120rpx;
		line-height: 120rpx;
		margin-left: 20rpx;
		font-size: 32rpx;
	}

	.im-bg-grey {
		background-color: #EBEBEB;
		color: #ffffff;
	}
</style>